<template lang="html">
  <div id="financial">
    <el-tabs v-model="activeName" stretch @tab-click="handleClick">
      <el-tab-pane label="账单管理" name="/finance" :lazy="true">
         <router-view name="Financial"></router-view>
      </el-tab-pane>
      <el-tab-pane label="成本管理" name="/cost">
         <router-view name="Cost"></router-view>
      </el-tab-pane>
      <el-tab-pane label="利润管理" name="/profit" :lazy="true">
         <router-view name="Profit"></router-view>
      </el-tab-pane>
      <el-tab-pane label="工资管理" name="/salary" :lazy="true">
         <router-view name="Salary"></router-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: '',
  components: {
  },
  data() {
    return {
      activeName: this.$route.path
    };
  },
  methods: {
    ...mapActions(['getTable', 'changePage']),
    handleClick(tab) {//切换选项卡点击时间（改变路由）
      if (this.$route.path != tab.name) {
        this.$router.push(tab.name)
        this.activeName=tab.name
      }
    }
  },
  watch:{
    '$route.path':function(n,o){
      console.log(n)
      this.activeName=n
    },
    
  },
}

</script>


<style lang="less" scoped>
#financial {
  text-align: center;

  h1 {
    color: #909399;
  }
}

</style>
